Customer asked me if this is possible to add handwritten signature to a PDF generated using tools available in Office 365. My first thought was “no”, then I checked that there is “Pen input” control in PowerApps, so it was like “yes”. Then again, after searching “how” this signature can be put inside a document, I thought this is a “no”.

Why?

Basically because the behavior of the “Pen input” control is way different than “Camera”: its data is not stored as base64 string, but as a hyperlink to a local blob storage (appres://blobmanager/) that is available only for a current instance of the application.

Therefore, when trying to pass that value to Microsoft Flow, process cannot access the contents of the image, because is only given its URL and is ending up with various errors related to it, ex.:

Solutions

My general idea was to limit usage of 3rd party apps and Azure Functions. Also, to make it as simple, as possible. I found bunch of solutions, like:

1. Suggesting to save signatures into a collection and then write them to SharePoint (https://powerusers.microsoft.com/t5/General-Discussion/Save-Signature-to-SharePoint-List/td-p/76661) – I couldn’t make it work. Signatures from collection were still URLs to blobmanager.
2. Second one was quite interesting, telling to send signature as an attachment using Outlook connection (https://powerusers.microsoft.com/t5/Creating-Apps/PowerApps-Digital-Signature-to-Sharepoint-List/m-p/153702/highlight/true#M4252) – it actually work, what surprised me – why it is possible to send that signature as an image attachment, but is impossible to pass it to Flow? 🙂
3. The one, most advanced was using custom connector based on the OpenAPI (https://powerusers.microsoft.com/t5/General-Discussion/Pen-input-save-image-to-SharePoint/m-p/82215/highlight/true#M31819) – that one I haven’t tried, but I see no reason, why it wouldn’t work.

But in my opinion they were all to complicated. The one with e-mail was also way to slow – sometimes I had to wait over 5 minutes for the Outlook trigger to start my Flow. 

My solution

The purpose of the application is to allow mobile user to write an inspection report and sign it, so that both the data from report and a signed PDF file are then saved to SharePoint. For my needs I decided to try using Azure Blob Storage as the place where I’m saving the signature and from where it is later being picked up by the process. And the process is as following:

1. User fills in a report form
2. User sign the form
3. Form is being saved to SharePoint
4. In the “OnSuccess” event of the form submission there is a set of action added, to save signature to Blob Storage and then to trigger Microsoft Flow, passing it data from the submitted form.
5. Microsoft Flow pics signature, creates HTML with it.
6. Then converts it to PDF
7. Attaches PDF to the created, in the 3rd step, item.

Create blob storage

The blob storage is quite cheap. I think it will cost my customer 0 for the expected traffic (https://azure.microsoft.com/en-us/pricing/details/storage/blobs/). To create your own storage, go to Azure Portal and create new storage account:

Once created, open your resource and then go to “Storage Explorer” to create new “Blob container”:

P.S. You can do this as well using “Azure Storage Explorer” (https://azure.microsoft.com/en-us/features/storage-explorer/) – free desktop tool from Microsoft.

Create PowerApps app

Next create your app. Add “Pen input” control where you want it. And a submit button. Also, add new “Data source” that is “Azure Blob Storage”. When creating, you’ll be asked to provide Azure Storage account name and account access key:

This information can be obtained again in the created resource’s dashboard, in the “Access key” menu:

Copy one of the keys, paste to the connection form and done.

Now you can add a function to the “submit button” that creates new file in the blob storage account:

AzureBlobStorage.CreateFile("files", "TestFile.png", PenInput1.Image);

Where:

• “files” – this is name of the created “blob container”
• “TestFile.png” – name of the file, that will be created with the image from the Pen input control.
• PenInput1.Image – contents of the file that is going to be created.

Microsoft Flow

Now the Flow, that is going to combine data into a HTML file and convert to PDF. Microsoft Flow is called in my case after the creation of the file in Blob Storage is completed – both functions are being triggered by the same “OnSuccess” event, but are divided with semicolon, thus second one will start after first is completed:

AzureBlobStorage.CreateFile("files", "TestFile.png", PenInput1.Image); SignDocument.Run(Form1.LastSubmit.Location, Form1.LastSubmit.Customer, Form1.LastSubmit.ReportComments, User().FullName, "/files/TestFile.png", Form1.LastSubmit.ID);ResetForm(Form1);Reset(PenInput1)

The “/files/TestFile.png” is the parameter that Flow is then using in “Get blob content” action. After it gets it, it then builds the HTML contents, adding the signature as an image, using the following expression: 

<p><img width="200" src="dataUri(body('Get_blob_content'))" /></p>

Next I’m using “Create file” action from “One Drive” set of actions, using the HTML contents as the file contents. Next I’m converting the file to PDF. After that, I’m attaching converted file to the created SharePoint list item record. It’s ID is passed as a parameter form PowerApps to Flow:

The results

For my needs and as the proof of concept the whole solution works like a charm. See yourself!

Please leave your comments and questions below!

For comparison purposes, see how you can add signature to PDF documents using Nintex Forms: https://poszytek.eu/nintex-en/mobile-en/how-to-use-nintex-mobile-signature-in-document-generation/